<template>
  <div id="payPwd" v-show="panelShow" :panelShow="panelShow">
    <div class="pwd-title">输入设备码</div>

    <label :for="`code-${uuid}`">
      <ul :class="`${theme}-container pwd-wrap`">
        <li class="field-wrap" v-for="(item, index) in length" :key="index">
          <i class="char-field">{{value[index] || placeholder}}</i>
        </li>
      </ul>
    </label>
    <input
      ref="input"
      class="input-code"
      @keyup="handleInput($event)"
      v-model="value"
      :id="`code-${uuid}`"
      :name="`code-${uuid}`"
      type="number"
      :maxlength="length"
      autocorrect="off"
      autocomplete="off"
      autocapitalize="off"
      autofocus="autofocus"
    />

    <mu-button class="btn" @click="hidePanel">确定</mu-button>
  </div>
</template>

<script>
import { Toast,Dialog } from "vant";
import "vant/lib/toast/style/index";
export default {
  name: "equipmentcode",
  // component properties
  props: {
    length: {
      type: Number,
      default: 8
    },
    placeholder: {
      type: String,
      default: "-"
    },
    theme: {
      type: String,
      default: "block"
    }
  },
  // variables
  data() {
    return {
      value: "",
      panelShow: false
    };
  },
  computed: {
    uuid() {
      return Math.random()
        .toString(36)
        .substring(3, 8);
    }
  },
  methods: {
    showPanel() {
      this.panelShow = true;
    },
    hidePanel() {
      this.panelShow = false;
      //此处调用接口，返回判断为正确时存入vue，并跳转成功页面
      if (this.value.length < 8) {
        Toast("充电桩编号错误");
        return;
      }
      this.$api.getChargingPileData(this.value).then(res => {
        console.log(res);
        if (res.data.code == 2000) {
          Toast("无此充电桩");
          this.value = "";
          return;
        }
          if (res.data.code == 2004) {
              this.$emit('equiperror')
          }else{
              this.$store.dispatch("setChargingID", this.value);
              // this.$alert.alert('充电桩编号无误', 'Alert');

              this.$router.push("/success");

          }
      });
    },
    hideKeyboard() {
      // 输入完成隐藏键盘
      document.activeElement.blur(); // ios隐藏键盘
      this.$refs.input.blur(); // android隐藏键盘
    },
    handleSubmit() {
      this.$emit("input", this.value);
    },
    handleInput(e) {
      if (e.target.value.length >= this.length) {
        this.hideKeyboard();
      }
      this.handleSubmit();
    }
  }
};
</script>

<style lang="scss">
</style>
